<!--
 @description 自定义页面楼层内容项
 @fileName ContentItem.vue
 @author zengqiongying
 @created 2022/12/28 15:10:00
-->
<template>
  <div
    class="floor-item"
    :class="{
      'show-tow-column':layoutCode==='twoColumn' || layoutCode ==='twoLinetwoColumn' || isProduct,
      'show-one-column':layoutCode==='oneColumn',
      'show-one-small':layoutCode==='oneColumnSmall',
      'show-three-column':layoutCode==='threeColumn',
      'show-four-column':layoutCode==='fourColumn',
      'show-four-scroll':layoutCode==='fourColumnScroll'
    }"
    @click="clickHandle"
  >
    <div :class="['image',{'proimg':isProduct}]">
      <ImageVideo lazy-load :host="host" :src="src" fit="fill" />
    </div>
    <div class="name" :class="{'pro-name':isProduct}">{{ name }}</div>
    <div v-if="showTags.length" class="show-window-tips">
      <span v-for="(tag,i) in showTags" :key="i">{{ tag }}</span>
    </div>
    <div v-if="isProduct" class="price">
      <template v-if="showPrice">
        <span class="sub">&yen;</span>
        <span>{{ integer }}</span>
        <span class="sub">.{{ decimals || '00' }}</span>
      </template>
      <template v-else>
        <span>暂无报价</span>
      </template>
    </div>
  </div>
</template>

<script>
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'CustomPageContentItem',
  components: {
    ImageVideo
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    tagList: {
      type: Array,
      default: () => []
    },
    price: {
      type: [String, Number],
      default: ''
    },
    isProduct: {
      type: Boolean,
      default: false
    },
    host: {
      type: String,
      default: ''
    },
    layoutCode: {
      // 布局类型： oneColumn  1列 ， oneColumnSmall 1列(低高度)
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {
    integer() {
      return this.price.toString().split('.')[0]
    },
    decimals() {
      const p = this.price.toString().split('.')
      return p.length >= 2 ? p[1] : ''
    },
    showPrice() {
      return this.price < 999999 && this.$isDef(this.price) && !this.$isEmpty(this.price)
    },
    showTags() {
      const tmps = this.tagList.filter(v => ![null, undefined, ''].includes(v))
      return tmps.slice(0, 2)
    }
  },
  created() {},
  activated() {},

  mounted() {},

  methods: {
    clickHandle() {
      this.$emit('click')
    }
  }
}

</script>
<style lang='less' scoped>
.floor-item{
  padding-bottom: 10px;
  margin-top: 16px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(60,73,88,0.04);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .image{
    border-radius: 9px 9px 0 0;
    width: 100%;
  }
  .name{
    margin-top: 10px;
    padding: 0 10px;
    width: 100%;
    line-height: 1.5;
    font-weight: bold;
    color: #333333;
    box-sizing: border-box;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
    text-align:center;
    &.pro-name{
      margin-bottom: 12px;
      -webkit-line-clamp:2;
      text-align: left;
    }
  }
  &.show-tow-column{
    --width: calc((100vw - 32px - 13px)/2);
    width: var(--width);
    margin-right: 13px;
    &:nth-child(even){
      margin-right: 0;
    }
    .image{
      height: calc(var(--width) * 146 / 165);
      &.proimg{
        height: var(--width);
        background: #fff;
      }
    }
  }
  &.show-one-column{
    width: 100%;
    --oW:calc(100vw - 16px - 16px );
    margin-right: 0;
    .image{
      height: calc(var(--oW) * 180 / 343);
    }
  }
  &.show-one-small{
    width: 100%;
    --oW:calc(100vw - 16px - 16px );
    margin-right: 0;
    .image{
      height: calc(var(--oW) * 100 / 343);
    }
  }
  &.show-three-column{
    --width: calc((100vw - 32px - 16px)/3);
    width: var(--width);
    margin-right: 8px;
    &:nth-child(3n){
      margin-right: 0;
    }
    .image{
      height: calc(var(--width) * 100 / 109);
    }
  }
  &.show-four-column{
    --width: calc((100vw - 32px - 24px)/4);
    width: var(--width);
    margin-right: 8px;
    &:nth-child(4n){
      margin-right: 0;
    }
    .image{
      height: calc(var(--width) * 78 / 92);
    }
  }
  &.show-four-scroll{
    flex-shrink: 0;
    width:92px;
    margin-right: 10px;
    .image{
      height: 78px;
    }
    .name{
      font-weight: normal;
    }
  }
  .price{
    padding: 0 10px;
    margin-top:auto;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    color: #E75E48;
    .sub{
      display: inline-block;
      font-size: 12px;
    }
  }

  .show-window-tips{
    margin-bottom: 2px;
    padding-left:10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    span{
      display: inline-flex;
      padding: 0 3px;
      margin-bottom: 6px;
      height: 18px;
      line-height: 18px;
      background: rgba(240, 213, 178, 0.5) ;
      // background: linear-gradient(133deg, rgba(250, 247, 239, 0.5) 0%, rgba(240, 213, 178, 0.5) 46%, rgba(244, 204, 170, 0.5) 100%);
      box-shadow: 0px 0px 9px 0px rgba(176,123,77,0.13), inset -2px -2px 9px 0px rgba(255,255,255,0.29);
      border-radius: 4px;
      font-size: 10px;
      color: #B7854F;
      margin-right: 6px;
    }
  }
}
</style>
